<template>
  <!-- 产品tabs 默认有搜索框 -->
  <div class="pro-tab-wrap flex-center-start">
    <!-- tabs -->
    <div
      class="pro-tab flex-center"
      v-for="item in tabs"
      :key="item.id"
      :class="selectedId == item.id ? 'active' : ''"
      @mouseover="selectedId = item.id"
      @mouseleave="selectedId = defaultSelectedId"
      @click="changeTab(item.id)"
    >
      {{ item.name }}
    </div>
    <!-- 搜索框 -->
    <div class="pro-search">
      <el-input
        placeholder="搜索"
        prefix-icon="el-icon-search"
        v-model="inputVal"
        size="mini"
        maxlength="100"
      >
      </el-input>
    </div>
    <!-- 时间检索 -->
    <div class="pro-search pro-datePicker">
      <el-date-picker
        v-model="datePickerVal"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        size="mini"
      >
      </el-date-picker>
    </div>
    <!-- 标签检索 -->
    <div class="pro-search pro-select">
      <el-input
        placeholder="请选择标签"
        prefix-icon="el-icon-price-tag"
        :value="selectVal"
        :suffix-icon="showTree ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        @click.native="deptogglePanel($event)"
        size="mini"
        maxlength="200"
      ></el-input>
      <div v-if="showTree" class="treeDiv" ref="suoShuMenTree">
        <el-tree
          class="suoshubumen"
          :data="proLabels"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expand-all="true"
          :default-checked-keys="checkedKeys"
          :expand-on-click-node="true"
          :check-strictly="true"
          @check="handleRegionNodeClick"
        ></el-tree>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="pro-button">
      <el-button
        type="primary"
        size="mini"
        @click="clickSearch({ isTabs: false })"
        >搜索</el-button
      >
    </div>
    <div class="pro-button">
      <el-button
        type="primary"
        size="mini"
        @click="initTabbarValFn({ isTabs: false })"
        >清空</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabSearch: {
      type: Function,
    },
    proLabels: {
      type: Array,
    },
  },
  data() {
    return {
      inputVal: "",
      datePickerVal: [],
      nodes: {},
      selectVal: "",
      checkedKeys: [],
      showTree: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      tabs: [
        {
          name: "全部",
          id: "0",
        },
        {
          name: "图像",
          id: "2",
        },
        {
          name: "视频",
          id: "3",
        },
      ],
      defaultSelectedId: "0",
      selectedId: "0",
      isClickSearch: false,
    };
  },
  methods: {
    // tab切换方法
    changeTab(id) {
      this.selectedId = id;
      this.defaultSelectedId = id;
      this.clickSearch({ isTabs: true });
    },
    // 树搜索框 start
    // 点击空白关闭下拉菜单
    deptogglePanel(event) {
      event || (event = window.event);
      event.stopPropagation
        ? event.stopPropagation()
        : (event.cancelBubble = true);
      this.showTree ? this.dephide() : this.depshow();
    },

    depshow() {
      this.showTree = true;
      document.addEventListener("click", this.dephidePanel, false);
    },
    dephide() {
      this.showTree = false;
      document.addEventListener("click", this.dephidePanel, false);
    },
    dephidePanel(e) {
      if (
        this.$refs.suoShuMenTree &&
        !this.$refs.suoShuMenTree.contains(e.target)
      ) {
        this.dephide();
      }
    },
    // 点击复选框
    handleRegionNodeClick(node, { checkedKeys }) {
      // 设置选中的值 用于查询
      this.checkedKeys = checkedKeys;
      console.log("checkedKeys", checkedKeys);
      console.log("node", node);
      // 设置input的值 用于回显
      this.nodes[node.id] = node.name;
      let selectVal = "";
      this.checkedKeys.forEach((info) => {
        if (this.nodes[info]) {
          selectVal += this.nodes[info] + ",";
        }
      });
      this.selectVal = selectVal.substring(0, selectVal.length - 1);
    },
    // 树搜索框 end
    // 清空上方表单
    initTabbarValFn({ isTabs }) {
      if (this.isClickSearch) {
        let initObj = {
          name: "",
          startTime: "",
          endTime: "",
          categoryIds: "",
          tabs: this.selectedId,
          isTabs,
        };
        this.tabSearch(initObj);
        this.isClickSearch = false;
      }
      this.inputVal = "";
      this.datePickerVal = [];
      if (this.selectVal) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([]);
        });
      }
      this.checkedKeys = [];
      this.selectVal = "";
    },

    // 按钮查询
    clickSearch({ isTabs }) {
      const name = this.inputVal;
      const date = this.datePickerVal;
      let startTime = "";
      let endTime = "";
      if (date && date.length === 2) {
        startTime = date[0];
        endTime = date[1];
      }
      console.log("date", startTime, endTime);
      let categoryIds = "";
      this.checkedKeys.forEach((info) => {
        categoryIds += info + ",";
      });
      categoryIds = categoryIds.substring(0, categoryIds.length - 1);
      // 查询
      console.log({
        name,
        startTime,
        endTime,
        categoryIds,
        tabs: this.selectedId,
        isTabs,
      });
      this.tabSearch({
        name,
        startTime,
        endTime,
        categoryIds,
        tabs: this.selectedId,
        isTabs,
      });
      this.isClickSearch = true;
    },
  },
};
</script>

<style lang="scss">
.pro-tab-wrap {
  height: 0.5rem;
  border-bottom: 1px solid #034475;
  font-size: 0.16rem;
  padding-right: 0.1rem;
  .pro-tab {
    position: relative;
    height: 100%;
    width: 1.3rem;
    color: #cccccc;
    cursor: pointer;
    &.active {
      color: #2a9dff;
      &:after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 0.04rem;
        background: #2a9dff;
      }
    }
  }
  .pro-search {
    width: 2rem;
    margin-left: 2%;
    .el-input--mini .el-input__inner {
      color: #cccccc;
      background-color: #034576;
      border: 0px;
    }
  }
  .pro-button {
    width: auto;
    margin-left: 2%;
    .el-button--primary {
      color: #ffffff;
      background-color: #2a9dff;
      border-color: #2a9dff;
    }
  }
  .pro-select {
    .treeDiv {
      position: absolute;
      z-index: 99999;
      width: 3.95rem;
      height: 3rem;
      overflow-y: auto;
      overflow-x: hidden;
      .el-tree {
        position: relative;
        cursor: default;
        background: #00052b;
        color: #cccccc;
        border-radius: 0 0 5px 5px;
      }
      .el-tree-node__content:hover {
        background-color: #00052b;
      }
      .el-tree-node:focus {
        background-color: #00052b;
      }
      .el-tree-node:focus > .el-tree-node__content {
        background-color: #00052b;
      }
      //   选中后颜色
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #2a9dff;
        border-color: #2a9dff;
      }
      //   选中后颜色
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #2a9dff;
      }
      .el-tree-node {
        .is-leaf + .el-checkbox .el-checkbox__inner {
          display: inline-block;
        }
        .el-checkbox .el-checkbox__inner {
          display: none;
        }
      }
    }
  }

  .pro-datePicker {
    width: 3rem;
    .el-range-editor--mini.el-input__inner {
      // height: 0.28rem;
      width: 100%;
      background: #034576;
      border: 0;
      color: #cccccc;
    }
    .el-date-editor .el-range-separator {
      color: #f5f5f5;
      line-height: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-date-editor .el-range-input {
      color: #cccccc;
    }
  }
  .el-date-range-picker .el-picker-panel__body {
    color: #cccccc;
    background: #00052b;
  }
}

.el-picker-panel {
  color: #cccccc;
  background: #00052b;
  border: 0px;
}
.el-date-table th {
  color: #cccccc;
  border-bottom: solid 1px #82848a;
}
.el-date-range-picker__content.is-left {
  border-right: 1px solid #82848a;
}
.el-date-table td.in-range div {
  background-color: #1682e6;
}
.el-picker-panel__icon-btn {
  color: #cccccc;
}
</style>
